<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>发布竞价车辆</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/all.css" />
	<!--<link rel="stylesheet" href="assets/css/uploadimg.css" />-->
</head>
<body class="edit-car-infor">
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
		  <script src="assets/js/html5.min.js"></script>
		  <script src="assets/js/respond.min.js"></script>
		<![endif]-->
	<span class="layui-breadcrumb">
		<a>拍卖系统</a>
		<a><cite>发布竞价车辆</cite></a>
	</span>
	<div class="layui-container">
		<div class="layui-text">
			<h2 class="layui-field-title" style="text-align: center;">请详细填写以下内容</h2>
			<p class="warm-tip">注：带*为必填项</p>
		</div>
		<form class="layui-form" action="" onsubmit="return false;">
			<div class="layui-form-item carInforWrap">
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>报案号</label>
					<div class="layui-input-inline">
						<input type="text" name="number" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>车辆归属</label>
					<div class="layui-input-inline">
						<select name="carbelong" lay-verify="required">
					        <option value="">请选择</option>
					        <option value="1">个人</option>
					        <option value="2">单位</option>
				        </select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>车型</label>
					<div class="layui-input-inline">
						<input type="text" name="carsee" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>车牌</label>
					<div class="layui-input-inline">
						<input type="text" name="carnum" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>车辆户籍地</label>
					<div class="layui-input-inline">
						<input type="text" name="caraddress" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">车架号（vin码）</label>
					<div class="layui-input-inline">
						<input type="text" name="vinnum" lay-verify="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">发动机号</label>
					<div class="layui-input-inline">
						<input type="text" name="enginenum" lay-verify="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>事故类型</label>
					<div class="layui-input-inline">
						<select name="shigu" lay-verify="required">
					        <option value="">请选择</option>
					        <option value="1">事故车</option>
					        <option value="2">水淹车</option>
					        <option value="3">火烧车</option>
				        </select>
					</div>
				</div>				
				<div class="layui-inline">
					<label class="layui-form-label"><span class="musthave">*</span>登记日期</label>
					<div class="layui-input-inline">
						<input type="text" name="date" id="date" lay-verify="required" placeholder="年-月-日 时:分:秒" autocomplete="off" class="layui-input layui-date">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label"><span class="musthave">*</span>出险日期</label>
					<div class="layui-input-inline">
						<input type="text" name="date1" id="date1" lay-verify="required" placeholder="年-月-日 时:分:秒" autocomplete="off" class="layui-input layui-date">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">车辆性质</label>
					<div class="layui-input-inline">
						<select name="carnature">
					        <option value="">请选择</option>
					        <option value="1">运营车</option>
					        <option value="2">非运营车</option>
				        </select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">车辆类型</label>
					<div class="layui-input-inline">
						<select name="cartype">
					        <option value="">请选择</option>
					        <option value="1">轿车</option>
					        <option value="2">货车</option>
					        <option value="3">特种车</option>
				        </select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">承保金额</label>
					<div class="layui-input-inline">
						<input type="text" name="bxnum" lay-verify="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">估损金额</label>
					<div class="layui-input-inline">
						<input type="text" name="gsnum" lay-verify="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">全损金额</label>
					<div class="layui-input-inline">
						<input type="text" name="allnum" lay-verify='' autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">发证日期</label>
					<div class="layui-input-inline">
						<input type="text" name="date2" id="date2" placeholder="年-月-日 时:分:秒" autocomplete="off" class="layui-input layui-date">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">品牌型号</label>
					<div class="layui-input-inline">
						<input type="text" name="brandtype" lay-verify="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">所属分公司</label>
					<div class="layui-input-inline">
						<input type="text" name="fcompany" lay-verify="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">发布人员</label>
					<div class="layui-input-inline">
						<input type="text" name="publisher" lay-verify="" autocomplete="off" class="layui-input">
					</div>
				</div>				
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>联系人 </label>
					<div class="layui-input-inline">
						<input type="text" name="contacter" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>联系电话</label>
					<div class="layui-input-inline">
						<input type="text" name="conphone" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>					
				<div class="layui-inline">
					<label class="layui-form-label"><span class="musthave">*</span>竞价开始日期</label>
					<div class="layui-input-inline">
						<input type="text" name="date3" id="date3" lay-verify="required" placeholder="年-月-日 时:分:秒" autocomplete="off" class="layui-input layui-date">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label"><span class="musthave">*</span>竞价结束日期</label>
					<div class="layui-input-inline">
						<input type="text" name="date4" id="date4" lay-verify="required" placeholder="年-月-日 时:分:秒" autocomplete="off" class="layui-input layui-date">
					</div>
				</div>	
				<div class="layui-form-item">
					<label class="layui-form-label">出险经过</label>
					<div class="layui-input-inline">
						<textarea name="cxjg" style="width:590px" placeholder="请输入内容" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="car-location">
					<div class="layui-form-item">
						<label class="layui-form-label">车辆停放地</label>
						<div class="layui-input-inline">
							<select name="provid" id="provid" lay-filter="provid">
								<option value="">请选择省</option>
							</select>
						</div>
						<div class="layui-input-inline">
							<select name="cityid" id="cityid" lay-filter="cityid">
								<option value="">请选择市</option>
							</select>
						</div>
						<div class="layui-input-inline">
							<select name="areaid" id="areaid" lay-filter="areaid" onchange="getlocation()">
								<option value="">请选择县/区</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label"></label>
							<div class="layui-input-inline">
								<input id="detail-location" style="width:590px" type="text" name="detailid" placeholder="详细地址" autocomplete="off" class="layui-input" value="">
								<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
							</div>
						</div>
					</div>
					<!--<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label"></label>
							<div class="layui-input-inline">
								<div id="allmap"></div>
							</div>
						</div>
					</div>-->
				</div>								
				<div class="car-img">
					<div class="layui-upload imgupload layui-clear">
						<button type="button" class="layui-btn" id="edit-up-btn"></button>
						<blockquote class="layui-elem-quote layui-quote-nm layui-clear" style="border:none">图片上传:(<span style="color: red;">点击图片可将其删除,文件类型jpg、png、bmp、jpeg,大小不超过2M</span>)
							<div class="layui-upload-list" id="pics-wrap">
								 <span class="add-bg">+</span>
							</div>
						</blockquote>
					</div>
				</div>
			</div>
			<div style="text-align: center;margin:20px auto;">
				<button class="layui-btn save-btn">保  存</button>
				<button class="layui-btn" lay-submit lay-filter="car-submit-btn" onclick="tan()">提  交</button>
			</div>
		</form>
		<div class="addInput">
			<button class="layui-btn layui-btn-primary">
			 	<i class="layui-icon">&#xe608;</i> 添加自定义属性
			</button>
		</div>
		<div class="add-car-date">
			<button class="layui-btn layui-btn-primary">
			 	<i class="layui-icon">&#xe608;</i> 添加日期属性
			</button>
		</div>
	</div>

	<script src="assets/layui/layui.js"></script>
	<script src="assets/js/jquery-2.1.0.js"></script>

	<!--省市地区选择-->
	<script type="text/javascript" src="assets/js/data.js"></script>
	<script type="text/javascript" src="assets/js/province.js"></script>
	<script type="text/javascript">
		var defaults = {
			s1: 'provid',
			s2: 'cityid',
			s3: 'areaid',
			v1: null,
			v2: null,
			v3: null
		};
	</script>
	<!--//省市地区选择-->
	<!--地图定位-->
	<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EZPCgQ6zGu6hZSmXlRrUMTpr"></script>-->
	<script>
//		// 百度地图API功能
//		var map = new BMap.Map("allmap");
//		var point = new BMap.Point(116.331398, 39.897445);
//		map.centerAndZoom(point, 12)
//		map.enableScrollWheelZoom(true);//設置縮放
//		var myGeo = new BMap.Geocoder();
//		
//		//点击地图上的点获取地址
//		map.addEventListener("click", function(e){        
//			var pt = e.point;
//			myGeo.getLocation(pt, function(rs){
//				var addComp = rs.addressComponents;
//				
//				var thecontent = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
//				$("#detail-location").val(thecontent);
//
//				
//			});
//		});
//		
//		// 创建地址解析器实例
//		function getlocation() {
//			var provid = $('select[name="provid"] option:selected').text();
//			var cityid = $('select[name="cityid"] option:selected').text();
//			var areaid = $('select[name="areaid"] option:selected').text();
//			var detail = $('input[name="detailid"]').val();
//			var theloca = provid + cityid + areaid + detail;
//	
//			// 将地址解析结果显示在地图上,并调整地图视野
//			myGeo.getPoint(theloca, function(point) {
//				if(point) {
//					map.centerAndZoom(point, 16);
//					map.addOverlay(new BMap.Marker(point));
//				} else {
//					alert("您选择地址没有解析到结果!");
//				}
//			});
//		};
//		
//		
//		//根据地址在地图上地位
//		$(document).ready(function() {
//			$("#areaid").bind('select propertychange',function() {
//				console.log(1);
//				map.clearOverlays();    //清除地图上所有覆盖物
//				getlocation()
//			});
//			
//			$("#detail-location").bind("input propertychange",function () {
//				map.clearOverlays();    //清除地图上所有覆盖物
//              getlocation()
//          });
//		});
//		
//		//输入提示
//			var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
//				{"input" : "detail-location"
//				,"location" : map
//			});
//		
//			ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
//			var str = "";
//				var _value = e.fromitem.value;
//				var value = "";
//				if (e.fromitem.index > -1) {
//					value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
//				}    
//				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
//				
//				value = "";
//				if (e.toitem.index > -1) {
//					_value = e.toitem.value;
//					value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
//				}    
//				str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
//				$("searchResultPanel").innerHTML = str;
//			});
//		
//			var myValue;
//			ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
//			var _value = e.item.value;
//				myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
//				$("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
//				
//				setPlace();
//			});
//		
//			function setPlace(){
//				map.clearOverlays();    //清除地图上所有覆盖物
//				function myFun(){
//					var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
//					map.centerAndZoom(pp, 18);
//					map.addOverlay(new BMap.Marker(pp));    //添加标注
//				}
//				var local = new BMap.LocalSearch(map, { //智能搜索
//				  onSearchComplete: myFun
//				});
//				local.search(myValue);
//			}
//		
	</script>
	<!--//地图定位-->
	<script type="text/javascript" src="assets/js/all.js"></script>
	<script>
		layui.use(["form","element",'layer','upload'],function(){
			var form = layui.form,
				layer = layui.layer,
				upload = layui.upload,
				$ = layui.$
				//编辑发布汽车拍卖信息的页面js
				layer.photos({
	        photos: '#pics-wrap'
	    });
				//添加自定义表单
				function addNew() {
					layer.open({
						type: 1,
						title: '添加自定义属性',
						area: ['350px', '220px'],
						btn: ['确认', '取消'],
						yes: function(index) {
							layer.close(index);
							var theValue = $("#newInput").val();
							var newLine = '<div class="layui-inline"><label class="layui-form-label">' + theValue + '</label><div class="layui-input-inline"><input type="text" name="' + theValue + '" lay-verify="" autocomplete="off" class="layui-input"></div><i class="layui-icon delbtn">&#x1006;</i></div>';
							if(theValue.length) {
								$(".carInforWrap").append(newLine);
							}
			
						},
						content: '<div class="layui-form-item"><label class="layui-form-label">属性名称:</label><div class="layui-input-inline"><input id="newInput" type="text" name=""  autocomplete="off" class="layui-input"></div></div>'
					});
			
				};
			
				$("body").delegate('.addInput button', 'click', function() {
					addNew();
				});
			
				//添加日期属性
				$("body").delegate('.add-car-date button', 'click', function() {
					layer.open({
						type: 1,
						title: '添加日期属性',
						area: ['350px', '220px'],
						btn: ['确认', '取消'],
						yes: function(index) {
							layer.close(index);
							var theValue = $("#newInput").val();
							var newLine = '<div class="layui-inline"><label class="layui-form-label">' + theValue + '</label><div class="layui-input-inline"><input type="text" name="" id="" placeholder="年-月-日  时：分：秒" autocomplete="off" class="layui-input layui-date"></div><i class="layui-icon delbtn"  >&#x1006;</i></div>';
							if(theValue.length) {
								$(".carInforWrap").append(newLine);
							};
							//时间选择器
							$(".layui-date").each(function() {
								laydate.render({
									elem: this //指定元素
								    ,type: 'datetime'
								});
							});
			
						},
						content: '<div class="layui-form-item"><label class="layui-form-label">属性名称:</label><div class="layui-input-inline"><input id="newInput" type="text" name=""  autocomplete="off" class="layui-input"></div></div>'
					});
				});
			
				//删除自定义表单
				$("body").delegate('.delbtn', 'click', function() {
					$(this).parent(".layui-inline").remove();
					$(this).parent(".imgupload").remove();
				});
				
				//多图上传
				upload.render({
					elem: '#edit-up-btn',
					url: '/upload/',
					multiple: true,
					size: 1024 * 2,
					number: 0,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('.edit-car-infor #pics-wrap').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">');
							
						});
					},
					done: function(res) {
						//上传完毕
						if(res.result == 0) {
							layer.msg(res.message);
							
							//点击删除图片
							$(".edit-car-infor").delegate(".imgupload blockquote img", "click", function() {
								
								//alert(file.name);
								var theImg = $(this);
								layer.confirm("确定删除此张图片吗？", function(index) {
									$.ajax({
										type:"post",
										url:"upload?name="+ file.name,
										success:function(){
											theImg.remove();
										}										
									});									
									layer.close(index);
								})
							})
						} else {
							layer.msg("文件:" + res.filename + "---" + res.message);
						}
					},error:function(index,upload){
				    	layer.msg("服务器返回错误！");
				    	layer.closeAll('loading');
				    	
				    }
				});
				//点击删除图片
//				$(".edit-car-infor").delegate(".imgupload blockquote img", "click", function() {
//					var theImg = $(this);
//					alert(file.name);
//					layer.confirm("确定删除此张图片吗？", function(index) {
////						$.ajax({
////							type:"post",
////							url:"upload?name"+ file.name,
////							
////						});
//						theImg.remove();
//						layer.close(index);
//					})
//				})
			
			//监听提交
			form.on('submit(car-submit-btn)', function(data) {
//				layer.alert(JSON.stringify(data.field), {
//	                time:5000,
//	                title: "最终的提交信息"
//	            });
				console.log(data.field);
//				$.ajax({
//					type:"post",
//					url:"",
//					data:data.field,
//					dataType:"json",
//					success:function(){
//						layer.alert(JSON.stringify(data.result),{
//	                        time:5000,
//	                        title:"成功"
//	                   })
//					},
//					error: function(jqXHP,textStatus,errorThrown){
//	                    layer.alert(jqXHP.responseText);
//	                }
//				});
				return false;
			});

			
		})
//		function tan(){
//				
//			$('#cl span',window.parent.document).trigger("click");
//				
//		};
	</script>
</body>
</html>
